<template>
    <el-card shadow="never">
        <div slot="header">动态表单(custom)</div>
        <DynamicForm :schema="schema" labelSlotName="customLabel" :formData="formData">
            <template v-slot:customLabel="scope">
                <span v-if="scope.item.model === 'num3'">
                    {{scope.item.label}}
                    <el-tooltip content="labelSlotName的使用" placement="top">
                        <FontIcon color="#409EFF" iconName="el-icon-warning" />
                    </el-tooltip>
                </span>
                <span v-else>{{scope.item.label}}</span>
            </template>
            <template v-slot:num2="scope">
                <el-input v-model="scope.values.num2"></el-input>
            </template>
            <template v-slot:num3="scope">
                <el-input v-model="scope.values.num3"></el-input>
            </template>
        </DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/custom.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '姓名',
                        widget: 'input',
                        ui: {
                            clearable: true,
                            placeholder: '请选择'
                        }
                    },
                    num2: {
                        label: '自定义',
                        widget: 'custom'
                    },
                    num3: {
                        label: '自定义label',
                        widget: 'custom'
                    }
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 12
                    }
                },
                ui: {
                    labelWidth: 160
                }
            },
            formData: { }
        }
    },
}
</script>

<style>

</style>